<template>
    <div id="rightup" style="width: 600px; height: 400px;"></div>
  </template>
  
  <script setup>
import { defineProps, watch, nextTick,reactive} from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    childData1: Array // 即便使用假数据，保留此props以便未来切换到真实数据
});

let myChart = null;
const initECharts = (fakeData,fakeData2) => {
    const echartsContainer = document.getElementById("rightup");
    if (myChart) {
        myChart.dispose();
    }

    console.log(fakeData)
        console.log(fakeData2)
    myChart = echarts.init(echartsContainer);

    // 使用假数据生成函数，直接映射到图表数据配置
    

    const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
    const option = {
    tooltip: {
        trigger: 'item'
    },
    series: [{
        type: 'pie',
        center: ['30%', '30%'],
        radius: ['25%', '40%'],
        minAngle: 10 ,
        avoidLabelOverlap: true,
        hoverOffset: 15,
        itemStyle: {
            color: (params) => {
                return colorList[params.dataIndex]
            }
        },
        label: {
            show: true,
            position: 'outer',
            alignTo: 'labelLine',
            // ·圆点
            backgroundColor: 'auto',//圆点颜色，auto：映射的系列色
            height: 0,
            width: 0,
            lineHeight: 0,
            // height,width.lineHeight必须为0
            distanceToLabelLine: 0,//圆点到labelline距离
            borderRadius: 2.5,
            padding: [2.5, -2.5, 2.5, -2.5],
/*radius和padding为圆点大小，圆点半径为几radius和padding各项数值就为几
  如：圆点半径为1
            borderRadius: 1,
            padding: [1, -1, 1, -1]
*/
            formatter: '{a|{b}：}{b|{d}%}',
            rich: {
                a: {
                    padding: [0, 0, 0, 10]
                },
                b: {
                    padding: [0, 10, 0, 0]
                }
            }
        },
        data:fakeData,
    }, {
        type: 'pie',
        center: ['70%', '70%'],
        radius: ['25%', '40%'],
        minAngle: 10,
        avoidLabelOverlap: true,
        roseType: 'radius',
        hoverOffset: 15,
        itemStyle: {
            color: (params) => {
                return colorList.slice(2)[params.dataIndex]
            }
        },
        label: {
            show: true,
            position: 'outer',
            width:0,
            height: 0,
            lineHeight: 0,
            backgroundColor: 'auto',
            padding: [2,-2,2,-2],
            borderRadius: 2,
            distanceToLabelLine: 0,
            formatter: '{top|{b}}\n{bottom|{d}%}',
            align: 'center',
            rich: {
                top: {
                    verticalAlign: 'bottom',
// bottom：文字在上圆点在下
// top: 文字在下圆点在上
                    padding: [10, 10, 0, 10],
// padding：[上， 右， 下，左]，
// 上：圆点到上文字间距, 文字上移距离
// 右：文字与右侧圆点间距, 文字左移距离
// 下：圆点到下文字间距, 文字下移距离
// 左：文字与左侧圆点间距, 文字右移距离
                    align: 'center'
 // center:文字圆点居中，right文字在圆点左侧，left文字在圆点右侧
                },
                bottom: {
                    padding: [0, 10, 10, 10],
                    verticalAlign: 'top',
                    align: 'center'
                }
            }
        },
        data: fakeData2,
    }]
};

    myChart.setOption(option);
};

let changeCount = 0;

watch(() => props.childData1, () => {
    changeCount++;
    if (changeCount === 2) {
        nextTick(() => {
            const fakeData = reactive(generateFakeData());
            const fakeData2 = reactive(generateFakeData2());
            initECharts(fakeData, fakeData2);
        });
     
    }
});

function generateFakeData() {
  const carTypes = [
      { name: 'suv', value: 400 },
      { name: '轿车', value: 700 },
      { name: '皮卡', value: 70},
      { name: '越野车', value: 400 },
      { name: 'MPV', value: 650 }
  ];

  const fakeData = reactive([]);
  for (let i = 0; i < carTypes.length; i++) {
      const randomValue = Math.floor(Math.random() * 1000) + 1; // 生成1到1000之间的随机数作为值
      const fakeEntry = { ...carTypes[i], value: randomValue };
      fakeData.push(fakeEntry);
  }
  return fakeData;
}
function generateFakeData2() {
  const carTypes = [
      { name: '燃油车', value: 400 },
      { name: '电动车', value: 700 },
  ];
  const fakeData = reactive([]);
  for (let i = 0; i < carTypes.length; i++) {
      const randomValue = Math.floor(Math.random() * 1000) + 1; // 生成1到1000之间的随机数作为值
      const fakeEntry = { ...carTypes[i], value: randomValue };
      fakeData.push(fakeEntry);
  }
  return fakeData;
}



  </script>
  
  <style scoped>
  /* 这里放置组件的样式 */
  </style>
  